<template>
    <div class="top">
        <div class="columns is-multiline">
            <div class="column is-one-quarter " v-for="show in shows">
                <show-card   :show="show"></show-card>
            </div>
        </div>
    </div>
</template>
<script>
    import ShowCard from "./ShowCard";
    import {api} from '@/tools/api'
    export default {
        name: 'album',
        data () {
            return {
                shows: []
            }
        },
        components: {
            // <my-component> 将只在父模板可用
            'show-card': ShowCard
        },
        mounted(){
            this.fetchData()
        },
        watch:{
            '$route': 'fetchData'
        },
        methods:{
            fetchData() {
                let that = this
                let albumID = this.$route.params.id
                api.get('/rrv/album/'+albumID)
                    .then(function (response) {
                        console.log(response);
                        that.shows = response.data.data.results
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        }


    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
